<!DOCTYPE html>
<!--2.4 template inheritance, inherit from base template-->
<!--The extends statement establishes the inheritance link between the two templates-->
{% extends "base.html" %}
<!--The two templates ( base.html and index.html )have matching block statements with name app_content-->
<!--11.4 import statement works similarly to a python import-->
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
<!--5.8 将原来的  <h1>Hi, user.username !</h1> 替换为如下内容 -->
{#    <h1>Hi, {{ current_user.username }}!</h1>#}
{# 13.3 Marking Texts to Translate #}
<h1>{{ _('Hi, %(username)s!', username=current_user.username) }}</h1>
<!--9.1 在for循环之前插入表单-->
<!--9.3 让博客提交表单可选-->
    {% if form%}
        <!--11.4 将原来的from替换为div, adds a wtf.quick_form() macro that in a single line of code renders the complete form-->
    <div class="row">
        <div class="col-md-4">
            {{ wtf.quick_form(form) }}
        </div>
    </div>
    {% endif %}
<!--9.3 Use blog post sub-template-->
    {% for post in posts %}
        {% include '_post.html' %}
    {% endfor %}
<!--10.6  Redesigned pagination links-->
    <nav aria-label="...">
        <ul class="pager">
            <li class="previous{% if not prev_url %} disabled{% endif %}">
                <a href="{{ prev_url or '#' }}">
                    <span aria-hidden="true">&larr;</span> Newer posts
                </a>
            </li>
            <li class="next{% if not next_url %} disabled{% endif %}">
                <a href="{{ next_url or '#' }}">
                    Older posts <span aria-hidden="true">&rarr;</span>
                </a>
            </li>
        </ul>
    </nav>
{% endblock %}